<template>
  <Form ref="validForm" :model="drawer" :rules="ruleValidate">
    <FormItem label="角色名" label-position="top" prop="name">
      <Input v-model="drawer.name" placeholder="请输入角色名称"/>
    </FormItem>

    <FormItem label="角色标识" label-position="top" prop="remark">
      <Input v-model="drawer.remark" placeholder="请输入角色标识,推荐使用全大写,多个单词使用下划线分割"/>
    </FormItem>

    <FormItem label="角色描述" label-position="top">
      <Input type="textarea" v-model="drawer.description" :rows="4" placeholder="请输入角色描述信息"/>
    </FormItem>

    <Row :gutter="32">
      <Col span="12">
        <div>
          是否设置为默认角色
          <Tooltip content="开启后,新注册用户默认使用该角色">
            <Icon type="ios-help-circle" size="20"/>
          </Tooltip>
        </div>
        <Switch v-model="drawer.defaultRole">
          <template #open>
            <Icon type="md-checkmark"></Icon>
          </template>
          <template #close>
            <Icon type="md-close"></Icon>
          </template>
        </Switch>
      </Col>
      <Col span="12">
        <div>
          是否启用角色
          <Tooltip content="开启后，角色才可以正常使用">
            <Icon type="ios-help-circle" size="20"/>
          </Tooltip>
        </div>
        <Switch v-model="drawer.state">
          <template #open>
            <Icon type="md-checkmark"></Icon>
          </template>
          <template #close>
            <Icon type="md-close"></Icon>
          </template>
        </Switch>
      </Col>
    </Row>

  </Form>

  <div class="demo-drawer-footer">
    <Button style="margin-right: 8px" @click="$emit('close-win', false)">关闭</Button>
    <Button type="primary" @click="handleForm">保存</Button>
  </div>
</template>

<script>
export default {
  props: {
    drawer: {type: Object, required: true}
  },
  data() {
    return {
      ruleValidate: {
        name: [
          {required: true, message: "角色名不允许为空", trigger: "blur"},
          {type: "string", max: 50, message: "角色名过长", trigger: "blur"},
        ],
        remark: [
          {required: true, message: "角色标识不允许为空", trigger: "blur"},
          {type: "string", pattern: /^\w+$/, message: "角色标识由字母数字下划线组成", trigger: "blur"},
        ]
      },
    }
  },
  emits: ["close-win"],
  methods: {
    handleForm() {
      this.$refs.validForm.validate(valid => {
        if (valid) {
          if (this.drawer.id == null) {
            this.handleSave();
          } else {
            this.handleUpdate();
          }
        }
      })
    },
    handleSave() {
      console.log("保存角色");
      this.$emit("close-win", "save");
    },
    handleUpdate() {
      console.log("修改角色");
      this.$emit("close-win", "update");
    },
    resetValidForm() {
      this.$refs.validForm.resetFields();
    },
  }
}
</script>

<style scoped>
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>